<template>
	<view class="join-a-group">
		<view class="join">
			<view class="join-top" @click="DownloadModal">
				<view class="join-left">拼友正在拼团，你可以直接参加</view>
				<view class="more">
					<text>更多</text>
					<image src="../../static/fan.png" mode=""></image>
				</view>
			</view>
			<view class="ejoins groupe" v-for="(join,index) in joinGroup" :key="index">
				<view class="ejoins-left">
					<image :src="join.img" mode=""></image>
					<view class="ejoins-con">
						<view class="username">{{join.username}}</view>
						<view class="text-data">
							<text>剩余{{join.data}}</text>
							<text>还差{{join.num}}人成团</text>
						</view>
					</view>
				</view>
				<text class="my-jointhegroup">我要参团</text>
			</view>
		</view>

		<DowModal v-show="showModal" v-on:closeme="closeme"></DowModal>
	</view>
</template>

<script>
	import DowModal from "@/components/groupbuy/dowmodal.vue"
	export default {
		components: {
			DowModal
		},
		data() {
			return {
				showModal: false,
				joinGroup: [{
						img: '/static/good/bq.png',
						username: '用户名xx',
						data: '12:32:56',
						num: '1'
					},
					{
						img: '/static/good/bq.png',
						username: '用户名xx',
						data: '12:32:56',
						num: '1'
					}
				]
			}
		},
		methods: {
			DownloadModal() {
				this.showModal = !this.showModal;
			},
			closeme() {
				this.showModal = !this.showModal;
			}
		}
	}
</script>

<style lang="scss">
	.join-a-group {
		padding: 0 32rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;

		.join {
			width: 100%;
			height: 100%;

			.join-top {
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.join-left {
					text-align: center;
					margin: auto;
				}

				.more {
					width: 10%;
					display: flex;
					align-items: center;

					text {
						margin-right: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
					}

					image {
						width: 10rpx;
						height: 20rpx;
					}
				}
			}

			.ejoins {
				width: 100%;
				padding: 15rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ejoins-left {
					display: flex;
					align-items: center;

					image {
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
					}

					.ejoins-con {
						margin-left: 25rpx;

						.username {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(40, 40, 40, 1);
						}

						.text-data {
							display: flex;

							text {
								margin-top: 20rpx;
								font-size: 20rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: rgba(127, 127, 127, 1);
							}
						}
					}
				}

				.my-jointhegroup {
					display: block;
					font-size: 24rpx;
					width: 144rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					background: linear-gradient(-90deg, rgba(247, 39, 74, 1) 0%, rgba(247, 79, 107, 1) 100%);
					border-radius: 27rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}

			}
		}


	}
</style>
